<!--
 * @Author: 张辰龙 zhangchenlong@julimeng.com
 * @Date: 2025-04-14 17:04:44
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-04-21 09:12:49
 * @FilePath: /managehub-admin-web/src/views/article/imData/components/msgdetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-dialog :title="`${dettailInfo.nickname}的聊天记录`" :visible.sync="dialogVisible" width="800px"
            :before-close="handleClose">
            <el-form :model="queryParams" inline>
                <el-form-item label="筛选条件">
                    <el-select v-model="queryParams.msgType">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="文本" value="1"></el-option>
                        <el-option label="图片" value="11"></el-option>
                        <el-option label="文档" value="12"></el-option>
                        <el-option label="音频" value="13"></el-option>
                        <el-option label="视频" value="14"></el-option>
                        <el-option label="日期" value="99"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期" v-if="queryParams.msgType == 99">
                    <el-date-picker v-model="queryParams.msgTime" type="datetime" placeholder="选择日期时间" align="right"
                        :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchList">查询</el-button>
                </el-form-item>
            </el-form>
            <div class="msg-box" v-loading="listLoading">
                <div v-for="(v, i) in tableData.list" :key="i" class="msg-item">
                    <div class="msg-header-img">
                        <img :src="v.fromUserIcon">
                    </div>
                    <div class="msg-content">
                        <div class="msg-header"> 
                            <div>{{v.fromUserNickName}} <span style="color: #409eff;">发送给</span> {{ v.toUserNickName }}</div>
                            <div style="margin-left: 10px;">{{ v.createAt }}</div>
                        </div>
                        <div class="msg-body">
                            <div class="msg-body-text" v-if="v.msg_type == 1">{{ v.msg_body }}</div>
                            <div class="msg-body-img" v-if="v.msg_type == 11">
                                <el-image :src="v.msg_body.thumbnail_download_url" :preview-src-list="[v.msg_body.thumbnail_download_url]"  style="width: 160px; height: 100px;"></el-image>
                            </div>
                            <div class="msg-body-video" v-if="v.msg_type == 14">
                                <video :src="v.msg_body.download_url" controls="controls" style="width: 160px; height: 100px;"></video>
                            </div>
                            <div class="msg-body-audio" v-if="v.msg_type == 13">
                                <audio :src="v.msg_body.download_url" controls="controls" style="width: 160px; height: 50px;"></audio>
                            </div>
                            <div class="msg-body-file" v-if="v.msg_type == 200 && v.sub_msg_type == 150">
                                分享： <video :src="v.msg_body.linkUrl" controls="controls" style="width: 160px; height: 100px;"></video>
                            </div>
                            <div class="msg-body-file" v-if="v.msg_type == 200 && v.sub_msg_type == 100">
                                邀请进群： <span>{{ v.msg_body.groupName }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pageRight">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper" :current-page.sync="queryParams.pageNum"
                    :page-size="queryParams.pageSize" :page-sizes="[10, 15, 20]" :total="tableData.total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getImsMemberChatRecord } from '@/api/im'
export default {

    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            dialogVisible: false,
            dettailInfo: {},
            tableData: {
                list: [],
                total: 0
            },
            listLoading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                convType: 0, //0：聊天, 1: 房间, 2：群聊
                msgType: null,//1：文本, 10：组合, 11：图片, 12：文档, 13：音频, 14：视频, 200：自定义
                msgTime: null
            }
        }
    },
    methods: {
        handleSizeChange(val) {
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList();
        },
        searchList() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        getList() {
            let obj = Object.assign({}, this.queryParams)
            obj.fromUserId = this.dettailInfo.socialId
            if (obj.msgType == 99 && obj.msgTime == '') {
                return this.$message.error('请选择日期')
            }
            if (obj.msgTime != null) {
                obj.msgType = null
            }
            this.listLoading = true;
            getImsMemberChatRecord(obj).then(res => {

                res.data.list.forEach(v => {
                    if (v.msg_type != 1) {
                        v.msg_body = v.msg_body ? JSON.parse(v.msg_body) : {}
                    }
                })
                this.tableData.list = res.data.list
                this.tableData.total = res.data.total
                this.listLoading = false;
                console.log(this.tableData.list);
            })
        },
        opendialog(v) {
            this.dettailInfo = v
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                convType: 0, //0：聊天, 1: 房间, 2：群聊
                msgType: null,//1：文本, 10：组合, 11：图片, 12：文档, 13：音频, 14：视频, 200：自定义
                msgTime: null
            }
            this.dialogVisible = true;
            this.getList()
        },
        handleClose() {
            this.dialogVisible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.msg-box {
    .msg-item {
        display: flex;
        margin-bottom: 10px;
        .msg-header-img {
            width: 20px;
            height: 20px;
            background-color: #f5f5f5;
            width: 3%;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .msg-content {
            width: 80%;
            margin-left: 10px;
            .msg-header {
                display: flex;
                // justify-content: space-between;
            }
            .msg-body {
                margin-top: 10px;
                margin-left: 20px;
                .msg-body-text {
                    color: #000;
                    font-size: 14px;
                    font-weight: bold;
                    letter-spacing: 1px;
                }
                .msg-body-file {
                    display: flex;
                    color: #409eff;
                }
            }
        }
    }
}
</style>